<!DOCTYPE html><html><head><title>09-第九章  Position定位及background-attachment</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="09-第九章-position定位及background-attachment">09-第九章  Position定位及background-attachment</h1>

<p></p>



<h2 id="一position属性-规定元素的定位类型">一、position属性: 规定元素的定位类型</h2>

<p><code>static</code>        静态定位 （没有定位效果），</p>

<blockquote>
  <p>元素出现在正常的流中（默认值，可以忽略）</p>
</blockquote>

<p><code>relative</code>      相对定位，相对于其正常位置进行定位。</p>

<blockquote>
  <ul><li>不会脱离文档流；</li>
  <li>不影响元素本身的特性；</li>
  <li>如果没有定位偏移量，对元素本身没有任何影响；</li>
  </ul>
</blockquote>

<p><code>absolute</code>  绝对定位，参考最近非 static 定位的父级进行定位。</p>

<blockquote>
  <ul><li>使元素完全脱离文档流；</li>
  <li>使inline支持宽高；</li>
  <li>块属性标签内容撑开宽度；</li>
  <li>没有定位父级则相对于body(整个文档)发生偏移；</li>
  <li>绝对定位一般配合相对定位使用；</li>
  <li>margin:auto失效；</li>
  </ul>
</blockquote>

<p><code>fixed</code>     固定定位，相对于浏览器窗口进行定位。</p>

<blockquote>
  <p>与绝对定位的特性一致</p>
</blockquote>

<hr>



<h2 id="二方向偏移量及">二、方向偏移量及</h2>

<p>top | right | bottom | left     定义定位元素某方向偏移量。</p>

<blockquote>
  <p>( 正值 ：开始往参考对象中心点跑 ，负值：往参考对象盒子边框外头跑)</p>
</blockquote>

<hr>



<h2 id="三z-index层级">三、Z-index层级</h2>

<p>定位元素默认后者层级高于前者</p>

<blockquote>
  <p>Z-index:[number]           定位层级；</p>
</blockquote>

<hr>



<h2 id="四z-index层级">四、Z-index层级</h2>

<blockquote>
  <p>scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 <br>
  fixed   当页面的其余部分滚动时，背景图像不会移动。—背景图片已经固定定位了</p>
</blockquote></div></body></html>